<template>
  <div id="app">
    <header>
      <div>
        <img src="https://photo.kkgold.com/photoserver/images/3/2018/12/19/fd86b6e2-6285-47f2-ab98-b9c4c09c0908.jpg" alt="">
      </div>
      <ul>
        <li><b>{{this.title}}</b></li>
        <li>克重：{{specification}}</li>
        <li>数量：{{amount}}</li>
        <li><em>¥</em>{{advance}}</li>
      </ul>
    </header>
    <ul class="logistics" v-show="false">
      <li>
        <span>给卖家留言：</span>
        <input type="text" placeholder="（限45个字）">
      </li>
      <li>
        <span>配送方式</span>
        <s class="grayColor">商家承担运费</s>
      </li>
    </ul>
    <ul class="logistics">
      <li>
        <span>货品总额 <em class="baseColor">*  (价格仅供参考)</em></span>
        <s>￥{{totalMoney}}</s>
      </li>
      <li>
        <span>预付款</span>
        <s>¥{{advance}}</s>
      </li>
      <li>
        <span>服务费</span>
        <s>￥{{service}}</s>
      </li>
      <li>
        <span>订购价</span>
        <s class="baseColor">￥{{price}}</s>
      </li>
      <li class="marginBottom">
        <span>商品优惠</span>
        <s>￥0.00</s>
      </li>
      <li class="marginBottom">
        <span>促销活动</span>
        <s>返金豆：0</s>
      </li>
      <li class="marginBottomF">
        <span>优惠券</span>
        <b class="grayColor">></b>
        <s class="grayColor">暂无可用 </s>
      </li>
    </ul>
    <footer>
      <p>实付金额：<s class="baseColor">¥</s><span class="baseColor">{{realMoney}}</span><em
        class="grayColor">（已节省：¥0.00）</em></p>
      <!--<p>今日剩余预约笔数 <span class="fr">5</span></p>-->
      <div>
        <a @click="_reservation(2)">回购</a>
        <a @click="_reservation(1)">预订</a>
      </div>
    </footer>
  </div>
</template>

<script>
  import {localStorageGet} from '../../../assets/js/localStorage'
  export default {
    name: "advance",
    beforeCreate() {
      document.querySelector('body').setAttribute('style', 'background-color:#f3f3f3')
    },
    beforeDestroy() {
      document.querySelector('body').removeAttribute('style')
    },
    data() {
      return {
        title: '',
        amount: '',
        specification: '',
        advance: '',
        price: '',
        totalMoney: 0,
        realMoney: 0
      }
    },
    methods: {
      _reservation(num) {
        this.$Indicator.open({
          spinnerType: 'fading-circle'
        });
        let _this = this
        let parames = {
          // tradeMoney: this.totalMoney,
          tradeDirection: num,
          tradeCount: this.amount,
          tradeSkuNo: this.productNo,
          tradeLossPortion: 1,
          tradeOrderPrice: this.price*100,
          tradeProfitPortion: 1,
          tradeRemark: "create order",
          tradeCoupon: -1,
          tradeUserNo: localStorageGet('code')
        }
        console.log(parames);
        this.$http.post('api/order/add', parames)
          .then(function (response) {
            _this.$Indicator.close()
            if(response.data.rc == 200){
              _this.$router.push('/order')
            }else  {
              _this.$Toast(response.data.msg)
            }
          })
          .catch(function (error) {
            _this.$Indicator.close()
            _this.$Toast(error.message)
            console.log(error);
          });
      }
    },
    created() {
      let data = localStorageGet('productInfoData')
      this.title = data.title
      this.amount = data.amount
      this.specification = data.specification
      this.advance = data.advance
      this.price = Number(data.price).toFixed(2)
      this.service = data.service
      this.productNo = data.productNo
      this.totalMoney = this.advance * this.amount
      this.realMoney = this.totalMoney + this.service
    }
  }
</script>

<style lang="less" scoped>
  #app {
    header {
      margin: 0.7rem 0.5rem;
      display: flex;
      padding: 0.5rem;
      border-radius: 25px;
      background: #fff;
      div {
        flex: 3.5;
        padding: 0.5rem;
      }
      ul {
        flex: 6.5;
        li {
          font-size: 0.597rem;
          margin: 0.35rem 0;
          &:last-of-type {
            font-size: 1rem;
            color: #ff9500;
            margin-top: 0.6rem;
            em {
              font-size: 0.64rem;
            }
          }
        }
      }
    }
    .logistics {
      margin-bottom: 0.7rem;
      li {
        line-height: 1.77rem;
        background: #fff;
        padding: 0 0.5rem;
        font-size: 0.512rem;
        input {
          outline: none;
          height: 1.77rem;
          border: 0;
          width: 76%;
        }
        span {
          em {
            font-size: 0.426rem;
          }
        }
        s {
          float: right;
          text-decoration: none;
        }
        b {
          float: right;
          font-family: SimSun;
          font-size: 0.8rem;
          font-weight: bold;
          margin-left: 0.3rem;
        }
      }
    }
    footer {
      position: fixed;
      bottom: 0;
      width: 100%;
      background: #fff;
      max-width: 750px;
      p {
        font-size: 0.512rem;
        padding: 0.5rem;
        span {
          font-size: 0.64rem;
        }
        &:nth-of-type(2) {
          font-size: 0.42rem;
          color: #565656;
          padding-bottom: 0.5rem;
          padding-top: 0.1rem;
          span {
            font-size: 0.42rem;
          }
        }
      }
      div {
        line-height: 1.856rem;
        display: flex;
        a {
          flex: 1;
          color: #fff;
          text-align: center;
          font-size: 0.74rem;
          background: #4cd964;
          &:nth-of-type(2) {
            background: #ff9500;
          }
        }
      }
    }
    .marginBottom {
      margin-bottom: 0.7rem;
    }
    .marginBottomF {
      margin-bottom: 3.5rem;
    }
  }
</style>
